<template>
  <div>
    <header>
      <router-link to="/"><i class="icon-back iconfont"></i></router-link>
      {{$t('register.register')}}
    </header>
    <section v-if="show===1">
      <div class="row">
        <input type="text" autocomplete="off" :placeholder="$t('forget.email_info')" id="email" v-model="email" @keyup.enter="sendCode" v-focus>
        <div class="err" v-if="emailErr"><p>{{emailErrText}}</p></div>
      </div>
      <div class="row">
        <input type="text" autocomplete="off" :placeholder="$t('forget.email_code_info')"  id="verificationCode" class="small" v-model="code" maxlength="6" @keyup.enter="next">
        <button class="small fr" @click="sendCode" :disabled="!getcode.v_code_btn">{{getcode.codeStr}}</button>
        <div class="err" v-if="codeErr"><p>{{codeErrText}}</p></div>
      </div>
      <div class="row">
        <button @click="next">{{$t('forget.next')}}</button>
      </div>
    </section>
    <section v-else-if="show===2">
      <div class="row">
        <input type="password" style="display:none;width:0;height:0;">
        <input type="password" autocomplete="new-password" :placeholder="$t('login.pwd_input')" id="pwd" v-model="password" maxlength="32" v-focus>
        <div class="err" v-if="passwordErr"><p>{{passwordErrText}}</p></div>
      </div>
      <div class="row">
        <input type="password" style="display:none;width:0;height:0;">
        <input type="password" autocomplete="new-password" :placeholder="$t('register.pwd_input_sure')" id="pwd2" v-model="rpwd" @keyup.enter="toRegister">
        <div class="err" v-if="rpwdErr"><p>{{rpwdErrText}}</p></div>
      </div>
      <div class="row">
        <button @click="toRegister">{{$t('header.register')}}</button>
      </div>
    </section>
    <section v-else class="success">
      <i class="iconfont icon-chenggong2"></i>
      <p>{{$t('register.success')}}</p>
    </section>
  </div>
</template>
<script>
import { register } from '@/mixins';

export default {
  mixins: [register],
  mounted() {
    window.document.querySelector('#app').style.minWidth = 'auto';
  },
  destroyed() {
    window.document.querySelector('#app').style.minWidth = '1200px';
  },
};
</script>
<style lang="scss" scoped>
header{
  height: 1.333333rem;
  line-height: 1.333333rem;
  background-color: #fff;
  box-shadow: 0px 0px .066667rem 0px rgba(0, 0, 0, 0.05);
  border-bottom: solid 1px #e0e0e0;
  color: #76c1b3;
  font-size: 18px;
  position: relative;
  text-align: center;
  a{
    position: absolute;
    left: .4rem;
    color: #76c1b3;
    font-size: 24px;
  }
}
section{
  width: 9.2rem;
  height: 14rem;
  margin: .4rem auto;
  background-color: #ffffff;
  box-shadow: 0px 0px .066667rem 0px rgba(0, 0, 0, 0.05);
  border-radius: .066667rem;
  border: solid 1px #e0e0e0;
  padding: .8rem .666667rem;
  >div{
    margin: 0 auto;
    width: 100%;
    &.row{
      height: 1.253333rem;
      margin-bottom: 36px;
      position: relative;
      input{
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border: none;
        border-radius: 0;
        border-bottom: solid 1px #cccccc;
        outline: none;
        font-size: 15px;
        &.small{
          width: 3.8rem;
        }
      }
      .err{
        position: absolute;
        left: 0;
        top: 1.253333rem;
        color: #eb547c;
        font-size: 12px;
        line-height: 18px;
      }
      button{
        width: 100%;
        height: 100%;
        background-color: #76c1b3;
        border-radius: .066667rem;
        border: none;
        outline: none;
        font-size: 18px;
        color: #fff;
        padding: 0;
        &.small{
          width: 3.8rem;
          font-size: 15px;
        }
        &:hover,&:focus{
          background-color: #8dcdc2;
        }
        &:disabled{
          background-color: #ccc;
          cursor: not-allowed;
        }
      }
      &:last-of-type{
        margin-top: 1.333333rem;
      }
    }
  }
  &.success{
    text-align: center;
    i{
      font-size: 120px;
      color: #70c1b3;
      line-height: 140px;
    }
    p{
      font-size: 14px;
    }
  }
}
</style>
